<template>
    <div class="photoItem  flex justify-between items-center">
        <img v-if="list.img" alt="">
        <!--  :src="img"  -->
        <div class="content  flex justify-between items-start flex-col">
            <div class=" text">{{ list.text }}</div>
            <div>
                <div class="name ">{{ list.name }}</div>
                <div class="part">{{ list.job }}</div>
            </div>
        </div>
        <div class="button">
            <el-button @click="writing(list)">
                写信
            </el-button>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "PhotoItem",
    props: {
        list: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    watch: {

    },
    data() {
        return {};
    },
    methods: {
        writing(list) {
            console.log("222");
            this.$emit("writing", list);
        }
    }
};
</script>
  
<style lang='scss' scoped>
.photoItem {
    min-height: 100px;
    border-bottom: 1px solid #d1cfcf;
    padding: 16px 0px;

    >img {
        width: 80px;
        height: 100px;
        margin-right: 12px;
    }

    .content {
        min-height: 100px;
        flex: 1;
        font-size: 14px;
        font-weight: 400;
        // color: #333333;

        .text {
            line-height: 24px;
        }

        .name {
            margin-top: 16px;
            color: #265697;
            margin-bottom: 6px;
        }
    }

    .button {
        width: 15%;
        text-align: center;
    }
}

.button {}

::v-deep {
    .button .el-button {
        width: 100px;
        height: 34px;
        background: linear-gradient(179deg, #3A8EDC 0%, #2A6AA5 100%);
        border-radius: 2px;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 34px;
        padding: 0px;
    }
}
</style>